<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FaceBook</title>

	<link rel="stylesheet" href="./css/bootstrap.css">
	<link rel="stylesheet" href="./css/font-awesome.min.css">
	<link rel="stylesheet" href="./css/main.css">

	<script src="./js/jquery.min.js"></script>
	<script src="./js/bootstrap.min.js"></script>

	<!-- umeditor -->
	<link href="umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="umeditor/umeditor.config.js"></script>
	<script type="text/javascript" src="umeditor/umeditor.min.js"></script>
    <script type="text/javascript" src="umeditor/lang/zh-cn/zh-cn.js"></script>

</head>
<body>

	<header class="topbar navbar-default navbar-fixed-top row">

		<!-- logo -->
		<a href="" class="col-sm-1 col-md-1" style="text-align:right;padding-right:0.6em;">
			<i class="icon-2x icon-facebook-sign" style="color:white;"></i>
		</a>

		<!-- search -->
		<form class="form-inline col-sm-4 col-md-4 hidden-xs" role="form">
		  <div class="form-group-sm ">
		    <div class="input-group col-sm-12" >
		      <input class="form-control" type="text" placeholder="用户名">
		      <div class="input-group-addon" width="10%"> <i class="icon-search"></i> </div>
		    </div>
		  </div>
		</form>
		
		<!-- list -->
		<ul class="col-sm-5 nav-list col-md-offset-2 hidden-xs" >
			<li style="border-right:1px solid #365089;">
			    <a href="#">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="30px" height="30px">
			    </a>
			    bool
			</li>
			<li>
				<a href="">首页</a>
			</li>
		  <li>
		 	<lable class="icon-large icon-user"></lable>	
		    <!-- <span class="badge">14</span> -->
		  </li>
		  <li>
		 	<lable class="icon-large icon-comments"></lable>	
		  </li>	
		  <li>
		 	<lable class="icon-large icon-globe"></lable>	
		  </li>	
		  <li style="border-left:1px solid #365089;">
		 	<lable class="icon-large icon-lock" style="color:gray;"></lable>	
		  </li>	
	       <li class="dropdown">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="#">资料</a></li>
	            <li><a href="#">注销</a></li>
	            <li><a href="#">帮助</a></li>
	            <li><a href="#">反馈</a></li>
	          </ul>
	        </li>   		  	  
		</ul>
	
	</header>

  <!-- main -->
  <div class="container row" style="margin-top:4em;">

  	<!-- left -->
	<ul class="nav nav-pills nav-stacked  col-sm-2 col-md-2 nav-left hidden-xs" style="margin-left:6%;" role="tablist">
	  <li role="presentation" ><a href="#" class="icon-user"> 布尔</a></li>
	  <li role="presentation"><a href="#" class="icon-comments-alt"> 动态消息</a></li>
	  <li role="presentation"><a href="#" class="icon-comment-alt"> Messages</a></li>
	  <li><span>快速访问</span></li>
	  <li role="presentation"><a href="#" class="icon-user-md"> 布尔</a></li>
	  <li><span>发现</span></li>
	  <li role="presentation"><a href="#" class="icon-inbox"> 活动</a></li>
	  <li role="presentation"><a href="#" class="icon-globe"> 公共主页</a></li>
	  <li role="presentation"><a href="#" class="icon-group"> 小组</a></li>
	  <li role="presentation"><a href="#" class="icon-group"> 好友名单</a></li>
	  <li role="presentation"><a href="#" class="icon-tags"> 打招呼</a></li>
	</ul>
	<!-- left -->

	<!-- comment -->
	<div class="col-sm-6 col-md-6 comment">
		
		<!-- comment-box -->
		<div class="col-sm-12 col-md-12">
			<script type="text/plain" id="myEditor" style="width:100%;height:3em;"></script>
			<script>
			    //实例化编辑器
				var um = UM.getEditor('myEditor', {
					toolbar:[
			            'forecolor link |','emotion image video ',
			        ],
				});
			</script>
		</div>	
		<!-- comment-box -->
			
		<div class="col-sm-12 col-md-12 content-commit" style="padding-top:0.5em;">
			<button type="button" class="btn btn-primary btn-xs pull-right"> 发 布 </button>
		</div>

		<br class="visible-xs">

		<!-- welcome -->
		<div class="col-sm-12 col-md-12 welcome">
			<ul>
				<li><i class="icon-2x icon-facebook-sign" style="color:#3B5998;"></i></li>
				<li> <strong>布尔，下午好!</strong> </li>
				<li class="dropdown pull-right" style="position:relative;right:-1em;top:-1.8em;">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
		          	<span class="icon-angle-down" style="text-decoration:none;"></span>
		          </a>
		          <ul class="dropdown-menu" role="menu">
		            <li><a href="#" class="icon-remove"> 隐藏</a></li>
		          </ul>
		        </li> 
			</ul>
		</div>
		<!-- welcome -->


		<!-- list -->
		<div class="col-xs-12 col-sm-12 col-md-12 comment-list">
			<ul class="col-sm-12 col-md-12">
				<li>
				    <a href="#">
				      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="40px" height="40px">
				    </a>
				</li>
				<li> 
					<a href=""> <strong style="color:#365899;">布尔</strong> </a> 
				</li>
				<li style="position:relative;right:3.2em;top:1.3em;"> 
					<a href="" style="color:gray;font-size:12px;"> 2小时 </a> 
				</li>

				<li class="dropdown pull-right" style="position:relative;right:-1em;top:-1.2em;">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:gray;">  
		          	<span class="icon-angle-down" style="text-decoration:none;"></span>
		          </a>
		          <ul class="dropdown-menu" role="menu">
		            <li><a href="#" class="icon-remove"> 隐藏</a></li>
		            <li><a href="#" class="icon-remove-sign"> 停止关注</a></li>
		            <li class="divider"></li>
		            <li><a href="#" class="icon-info-sign"> 举报帖子</a></li>
		            <li><a href="#" class="icon-heart"> 收藏帖子</a></li>

		          </ul>
		        </li> 

				<li style="margin-top:1em;" class="pull-left col-sm-12 comment-content">
					<p>
						好像沒睡飽，匆匆從田中趕到台中上課，隨手又買到臺鐵便當，好開心！<br>
						<img src="./test.jpg" alt="">
					</p>	
					<hr>			
				</li>

				<li class="col-xs-12 col-sm-12 col-md-12 comment-tool">
					<span>  <i class="icon-thumbs-up"></i> <a href=""> 赞</a> </span> 
					<span>  <i class="icon-comment"></i> <a href=""> 评论</a> </span> 
					<span>  <i class="icon-share-alt"></i> <a href=""> 分享</a> </span> 
				</li>
			</ul>
			
		</div>	
		

		<!-- 评论列表 -->
		<div class="col-xs-12 col-sm-12 col-md-12 comment-list-content">
			<ul class="col-xs-12 col-sm-12">
				<li>
					<i class="icon-thumbs-up" style="color:#5890FF;"></i>
					<a href=""> 尹印和其他 90 位用户 </a>
					<hr style="margin-top:0.3em;">
				</li>
				<li class="comment-list-contents">
					<div>
					    <a href="#" class="pull-left">
					      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="32px" height="32px">
					    </a>
					    <a href="" class="pull-left"> <strong>bool</strong> </a>
					    <p class="pull-left"> 测试评论！！！！！！</p>
					</div>
				    <div class="pull-left" style="margin-left:-13em;margin-top:1.4em;">
					    <a href="">赞</a>
					    <a href="">回复</a>
					    <a href="">2小时</a>
				    </div>
				    <br><br>
				</li>
				<li class="comment-list-contents">
					<div>
					    <a href="#" class="pull-left">
					      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="32px" height="32px">
					    </a>
					    <a href="" class="pull-left"> <strong>bool</strong> </a>
					    <p class="pull-left"> 测试评论！！！！！！</p>
					</div>
				    <div class="pull-left" style="margin-left:-13em;margin-top:1.4em;">
					    <a href="">赞</a>
					    <a href="">回复</a>
					    <a href="">2小时</a>
				    </div>
				    <br><br>
				</li>
				<li>
					<!-- comment-box -->
					<div class="col-sm-12 col-md-12" style="margin-top:1em;">				
						<script type="text/plain" id="Editor" style="width:100%;height:2em;"></script>
						<script>
						    //实例化编辑器
							var um = UM.getEditor('Editor', {
								toolbar:[
						            'emotion image ',
						        ],
							});
						</script>
					</div>	
					<!-- comment-box -->
			
					<div class="col-sm-12 col-md-12 content-commit" style="padding-top:0.5em;margin-bottom:1em;">
						<button type="button" class="btn btn-primary btn-xs pull-right"> 发 布 </button>
					</div>

				</li>

			</ul>
		</div>	

		<!-- list -->
	




	</div>
	<!-- comment -->



	<br class="visible-xs">



	<!-- right -->
	<div class="col-sm-3 col-md-3 hidden-xs" style="margin-left:1%;" >
		<div class="right-main">	
			<ul class="nav nav-pills nav-stacked nav-left" role="tablist">
			  <li><span>可能认识的人</span></li>

			
			<!-- list -->
			  <li role="presentation" class="col-sm-12 col-md-12 col-lg-12"> 
			    <a href="#" class="col-sm-12 col-md-12 col-lg-12">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="50px" height="50px" class="pull-left">
			      <div class="pull-left" style="position:relative;top:-0.5em;padding-left:0.8em;">
				      <lable> <strong> bool </strong> </lable> <br>
				      <lable style="color:#90949C;">3个共同好友</lable>	<br>
				      <button type="button" class="btn btn-default btn-sm icon-plus" >&nbsp;加为好友 </button>
			      </div>
			      <i class="icon-remove pull-right"></i>
			    </a>
			  </li>
			<!-- list -->
			
			<!-- list -->
			  <li role="presentation" class="col-sm-12 col-md-12 col-lg-12"> 
			    <a href="#" class="col-sm-12 col-md-12 col-lg-12">
			      <img src="http://s.amazeui.org/media/i/demos/bw-2014-06-19.jpg" alt="" width="50px" height="50px" class="pull-left">
			      <div class="pull-left" style="position:relative;top:-0.5em;padding-left:0.8em;">
				      <lable> <strong> bool </strong> </lable> <br>
				      <lable style="color:#90949C;">3个共同好友</lable>	<br>
				      <button type="button" class="btn btn-default btn-sm icon-plus" >&nbsp;加为好友 </button>
			      </div>
			      <i class="icon-remove pull-right"></i>
			    </a>
			  </li>
			<!-- list -->
						

			</ul>					
		</div>	
	</div>
	<!-- right -->



  </div>
  <!-- main -->




</body>
</html>
